<template>
	<!-- 必到-评价详情 -->
	<view>
		<!-- 导航 -->
		<view>
			<u-navbar
				back-text="评价详情"
				:border-bottom="false"
				:back-text-style="textStyle"
				back-icon-color="#000000"
				style="font-weight: bold;font-family: PingFang SC;"
			></u-navbar>
		</view>
		<view>
			<view class="introduce" style="border-bottom: 1px solid #F2F2F2;padding-top: 0;">
				<view class="pjList">
					<view class="curser" style="width: 100%;">
						<image :src="appraiseDetail.portrait" mode=""></image>
						<view class="yonghu" style="width: 82%;">
							<view class="yonghu_nam">
								<view class="yonghu_mcs">{{ appraiseDetail.nickName }}</view>
								<view class="yonghu_data">{{ appraiseDetail.fmtCommentDatetime }}</view>
							</view>
							<u-rate
								:count="count"
								v-bind:value.sync="appraiseDetail.formatScore"
								inactive-icon="star-fill"
								:disabled="true"
								active-color="#F29423"
								inactive-color="#E4E4E4"
							></u-rate>
							<text>{{ appraiseDetail.formatScore }}</text>
						</view>
					</view>
				</view>
				<view v-if="appraiseDetail.comments" class="pingyu">{{ appraiseDetail.comments || '' }}</view>
				<view class="pircture" v-if="appraiseDetail.images">
					<view v-for="(ite, uin) in appraiseDetail.images.split(',')" :key="uin" @click="clickPreview(uin)"><image :src="ite" mode=""></image></view>
				</view>
				<!-- <view class="pingyu">{{ appraiseDetail.name }}</view> -->
			</view>
			<view style="border-bottom: 1px solid #F2F2F2;padding: 10px 0px 10px 0px;width: 92%;margin: auto;">
				<view style="font-size: 15px;font-weight: bold;color: #272755;line-height: 60rpx;">服务公司（河南必到网络有限公司）</view>
				<view><image style="width: 152rpx;height: 158rpx;" v-for="item in appraiseDetail.portraits" :src="item" mode="aspectFill"></image></view>
			</view>
			<view v-if="appraiseDetail.fmtReplyTime && appraiseDetail.fmtReplyTime!==''" style="border-bottom: 1px solid #F2F2F2;padding: 10px 0px 10px 0px;width: 92%;margin: auto;">
				<view style="font-size: 15px;font-weight: bold;color: #272755;line-height: 60rpx;">商家回复</view>
				<view style="line-height: 50rpx;color: #9393AA;">{{ appraiseDetail.entReply }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			count: 5,
			textStyle: {
				color: '#272755'
			},
			appraiseId: '',
			appraiseDetail: {},
			imagesList: []
		};
	},
	onLoad(option) {
		this.appraiseId = option.appraiseId;
		this.gettcDetails();
	},
	methods: {
		// 点击放大
		clickPreview(index) {
			uni.previewImage({
				current: index,
				urls: this.imagesList,
				indicator: 'default',
				loop: true
			});
		},
		// 获取评价详情
		gettcDetails() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'appraise/package/info'
			};
			let data = {
				appraiseId: _this.appraiseId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					console.log(res.data);
					_this.appraiseDetail = res.data;
					_this.imagesList = res.data.images.split(',');
				} else {
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.introduce {
	width: 92%;
	margin: auto;
	padding: 34rpx 0rpx 32rpx 0rpx;
}
.pjList {
	display: flex;
	margin-top: 24rpx;
}
.curser {
	display: flex;
	align-items: center;
}

.curser image {
	width: 94rpx;
	height: 94rpx;
	border-radius: 50%;
}
.yonghu {
	margin-left: 26rpx;
}

.yonghu text {
	color: #f29423;
}

.yonghu_nam {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.yonghu_mcs {
	color: #363636;
	font-size: 30rpx;

	width: 45%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.yonghu_data {
	font-size: 26rpx;
	color: #9393aa;
	font-weight: 500;
	width: 55%;
	text-align: right;
}
.pingyu {
	margin-top: 26rpx;
	color: #9393aa;
	font-size: 26rpx;
}

.pircture {
	display: flex;
	padding: 32rpx 0 0 0;
}

.pircture view {
	padding-right: 24rpx;
}

.pircture image {
	width: 152rpx;
	height: 158rpx;
}
</style>
